<template>
  <div class="password-strength-meter">
    <div class="strength-bar-container">
      <div
          v-for="i in 5"
          :key="i"
          class="strength-bar"
          :style="{ backgroundColor: getBarColor(i) }"
      ></div>
    </div>
    <div v-if="strength.text" class="strength-text" :style="{ color: strength.color }">
      密码强度: {{ strength.text }}
    </div>
  </div>
</template>

<script setup>
import { computed, toRefs } from 'vue';
import { checkPasswordStrength } from '@/utils/passwordStrength'; // 确保路径正确

const props = defineProps({
  password: {
    type: String,
    required: true,
  },
});

const { password } = toRefs(props);

// 计算属性，当密码变化时自动重新计算强度
const strength = computed(() => {
  return checkPasswordStrength(password.value);
});

// 根据强度等级决定每个小格的颜色
const getBarColor = (index) => {
  if (strength.value.score >= index) {
    return strength.value.color;
  }
  return '#e0e0e0'; // 未达到的强度格显示灰色
};
</script>

<style scoped>
.password-strength-meter {
  margin-top: 8px;
  width: 100%;
}
.strength-bar-container {
  display: flex;
  gap: 4px;
  height: 6px;
  width: 100%;
}
.strength-bar {
  flex-grow: 1;
  height: 100%;
  border-radius: 3px;
  transition: background-color 0.3s ease-in-out;
}
.strength-text {
  margin-top: 6px;
  font-size: 12px;
  text-align: right;
  font-weight: 500;
  transition: color 0.3s ease-in-out;
}
</style>
